<template>
  <transition name="fade-transform" mode="out-in">
    <div class="line" :class="className" />
  </transition>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'LineChart',
  props: ['index', 'data', 'inverse', 'dataType', 'isBig', 'mainWidth', 'mainHeight'],
  data() {
    return {
      className: 'chart' + this.index,
      selTime: [],
      end: [],
      endName: ''
    }
  },
  watch: {
    // 监听data变化
    data: {
      deep: true,
      handler(val) {
        this.initData()
        this.setOptions()
      }
    },
    // 监听翻转数据按钮
    inverse(val) {
      this.setOptions()
    },
    // 监听偏移量和距离量的转换
    dataType: {
      deep: true,
      handler(val) {
        if (val) {
          this.end = this.data.length ? this.data.map(item => (item.distance - this.data[0].distance).toFixed(2)) : []
          this.endName = '偏移量'
        } else {
          this.end = this.data.length ? this.data.map(item => (item.distance).toFixed(2)) : []
          this.endName = '距离量'
        }
        this.setOptions()
      }
    },
    mainWidth(n) {
      if (this.chart) {
        this.chart.resize()
      }
    },
    mainHeight(n) {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  mounted() {
    this.initData()
    this.initChart()
  },
  methods: {
    /* 初始处理上个页面的数据*/
    initData() {
      if (this.dataType) {
        this.end = this.data ? this.data.map(item => (item.distance - this.data[0].distance).toFixed(2)) : []
        this.endName = '偏移量'
      } else {
        this.end = this.data ? this.data.map(item => (item.distance).toFixed(2)) : []
        this.endName = '距离量'
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: this.isBig ? 'rgba(0,142,232,0.4)' : '#2a384b',
          borderColor: this.isBig ? 'rgba(0,142,232,1)' : '#2a384b'
        },
        grid: {
          x: 70, x2: 70, y: 10
        },
        dataZoom: [
          {
            type: 'inside',
            zoomLock: false
          }, {
            // startValue: '2019-03-31 22:32:36',
            // endValue: '2019-04-01 03:32:36',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.length ? this.data.map(item => item.createTime) : []
          // axisLine: {
          //   lineStyle: {
          //     // 设置x轴颜色
          //     color: this.isBig ? '#a9b8e2' : '#39465A'
          //   }
          // }
        },
        yAxis: {
          axisLabel: {
            margin: 2,
            formatter: function(value) {
              return value
            }
          },
          inverse: this.inverse,
          scale: true,
          type: 'value'
        },
        series: [{
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: this.end,
          itemStyle: {
            normal: {
              color: '#3f9cf1',
              lineStyle: {
                width: 1.5
              }
            }
          },
          markPoint: {
            symbolSize: 20,
            data: this.markPoint
          }
        }]
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.line {
  width: 100%;
  height: 80%;
  padding-bottom: 20px;
}
</style>
